<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .price{
            color: red;
            font-size: x-large;
            font-style: italic;
        }
        .red{
            color: red;
        }
        .orange{
            color: orange;
        }
        .yellow{
            color: yellow;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>数据双向绑定</h1>
        <p>{{age*2}}</p>
        <p>{{name}}</p>
        <p>{{hasWude ? '' : '不'}}讲武德</p>
        <hr>
        <input type="test" v-model='test'>
        <p>{{test}}</p>
        <p v-text="name"></p>
        <p v-html="te"></p>
        <button v-if="login">退出登录</button>
        <button v-else>请登录</button>
        <br>
        <button v-show="login">退出登录</button>
        <button v-show="!login">请登录</button>
        <br>
        <p v-for="(item,index) in gongfu">
            闪电五连鞭-第{{index+1}}招，{{item.name}}，价格：￥
            <span class="price">{{item.price.toFixed(2)}}</span> 元
        </p>
        <p v-bind:class="dawa">大娃</p>
        <p v-bind:class="erwa">二娃</p>
        <p :class="sanwa">三娃</p>
        <p>v-on 事件监听</p>
        <button v-on:click="say()">say</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data:{
                age:70,
                name:'mayun',
                hasWude: false,
                test:'hello',
                te:'<mark>hello Vue</mark>',
                login: false,
                gongfu:[
                    {name:'大海无量',price:5},
                    {name:'飞龙在天',price:10},
                    {name:'狂龙有悔',price:35},
                    {name:'力劈华山',price:50},
                    {name:'万剑朝宗',price:99}
                ],
                dawa:'red',
                erwa:'orange',
                sanwa:'yellow'
            },
            methods:{
                say(){
                    console.log('马老师，发生甚么事了');
                    console.log('偷袭'+this.age+'岁的老同志，不讲武德');
                }
            }
        })
    </script>
</body>
</html>